<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>shopping_cart</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .nav_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 54px;
            background-color: white;
        }

        .nav_img {
            width: 34px;
            height: 34px;
            border-radius: 4px;
            margin-left: 15px;
            margin-right: 8px;
            background-color: #f8f8f8;
        }

        .nav_appname {
            font-size: 12px;
            color: #333333;
        }

        .flex1 {
            flex: 1;
        }

        .nav_btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 2px;
            text-align: center;
            color: #ff7037;
            font-size: 14px;
            margin-right: 15px;
            border: 1px solid #ff7037;
        }

        .nav_btn:active {
            opacity: 0.7;
        }

        .shopping-list {
            flex: 1;
            width: 100%;
        }

        /* list */
        .sl-list_box {
            background-color: white;
            border-radius: 4px;
            padding: 10px 15px;
        }

        .sl-card_one {
            display: flex;
            flex-direction: row;
            padding: 15px 0;
            border-bottom: 1px solid #f8f8f8;
            justify-content: space-between;
        }

        .sl-card_img {
            width: 90px;
            height: 68px;
        }

        .sl-chk_img_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 35px;
            height: 68px;
            margin-right: 13px;
        }

        .sl-chk_img {
            width: 20px;
            height: 20px;
        }

        .sl-card_details {
            flex: 1;
            margin-left: 13px;
            width: 183px;
        }

        .sl-card_title {
            font-size: 15px;
            color: #333333;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .sl-card_tips {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 8px;
        }

        .sl-card_tip {
            font-size: 12px;
            color: #999999;
            padding: 0 4px;
            background-color: #f9faf9;
            margin-right: 5px;
        }

        .sl-card_lower {
            width: 10px;
            height: 10px;
        }

        .sl-card_dz {
            font-size: 12px;
            text-align: right;
            color: #999999;
        }

        .sl-card_pbox {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
        }

        .sl-card_price {
            font-size: 14px;
            color: #ff7037;
        }

        .sl-card_num {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 106px;
            height: 30px;
            border: 1px solid #f8f8f8;
            border-radius: 4px;
        }

        .sl-card_btn {
            width: 35px;
            text-align: center;
            font-size: 20px;
            color: #555555;
        }

        .sl-card_btn_disable {
            color: #cccccc;
        }

        .sl-card_num_text {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #333333;
        }

        .footer_box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            height: 51px;
            background-color: white;
        }

        .footer_chk {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 40px;
        }

        .chkall_img {
            width: 20px;
            height: 20px;
            margin-left: 15px;
        }

        .chk_zi {
            font-size: 12px;
            color: #666666;
            margin-left: 6px;
        }

        .footer_zi {
            flex-direction: row;
            align-items: center;
        }

        .footer_czi {
            font-size: 13px;
            color: #333333;
        }

        .footer_rzi {
            font-size: 15px;
            color: #fe5c00;
        }

        .footer_btn {
            width: 96px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #ffffff;
            border-radius: 2px;
            margin: 0 8px;
            background-color: #ff7037;
        }

        .footer_btn:active {
            opacity: 0.7;
        }

        .coverbg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .flex-auto {
            flex: auto;
        }
    </style>
</head>

<body>
    <div class="page">
        <!-- 顶部导航 -->
        <div class="nav-bar">
            <div onclick="back()" class="nav-bar-back display-none">
                <img src="../images/back/back.png" alt="back" class="nav-bar-back-icon" />
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">购物车</span>
        </div>
        <div class="shopping-list scroll-view-y flex-auto">
            <!-- 顶部title -->
            <div class="nav_box">
                <img class="nav_img"
                    src='../images/linkImg/e399d491160c706d4c7517ad05cd2170.png' />
                <span class="nav_appname">服饰商城</span>
                <div class="flex1"></div>
                <span class="nav_btn">编辑</span>
            </div>
            <!-- 购物车列表 -->
            <div class="sl-list_box"></div>
        </div>
        <!-- 结算 -->
        <div class="footer_box">
            <div class="footer_chk">
                <img class="chkall_img"
                    src="../images/main3/chk_1.png" />
                <span class="chk_zi">全选</span>
            </div>
            <div class="footer_zi">
                <span class="footer_czi">合计：</span>
                <span class="footer_rzi">￥100</span>
                <span class="footer_btn" onclick="onPlaceClick()">结算3</span>
            </div>
        </div>
    </div>
</body>
<script src="../script/api.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
        if(api.pageParam.param) {
            $api.removeCls($api.dom('.nav-bar-back'),'display-none');
        }
    }

    function back() {
        api.closeWin();
    }

    let carList = [
        {
            "key": "S",
            "buynum": 1,
            "id": "6117fcc80-d2f4-11ea-a0bc-bd616acc739c",
            "title": "港风套装女复古chic减龄短袖 ins复古穿搭",
            "image":
                "../images/linkImg/3ee90482ef5b13bdbd9e9dc3f79f495e.png",
            "price": 1299,
            "isjia": 0
        },
        {
            "key": "M",
            "buynum": 3,
            "id": "27b5c380-d2f7-11ea-a0bc-bd616ac2c739c",
            "title": "休闲时尚套装女夏裤子洋气可盐可甜",
            "image":
                "../images/linkImg/c6f60b449d9112c4aac0b681da880526.png",
            "price": 629,
            "isjia": 1
        },
        {
            "key": "S",
            "buynum": 6,
            "id": "9d739ce0-d2fd-11ea-a0bc-bd616acc739c",
            "title": "碎花连衣裙两件套装女温柔可人",
            "image":
                "../images/linkImg/2c8bbe302662ca7261a3f43a0a725d43.png",
            "price": 699,
            "isjia": 1
        }
    ]
    getCarListContent()
    function getCarListContent() {
        let str = '';
        carList.forEach((item, index) => {
            str += `
            <div class="sl-card_one">
				<div class="sl-chk_img_box">
					<img class="sl-chk_img" src="${index == 1 ? "../images/main3/chk_1.png" : '../images/main3/chk_0.png'}"/>
				</div>
				<img onclick="onDetailClick()" class="sl-card_img" src="${item.image}" mode="aspectFill"/>
				<div class="sl-card_details">
					<span class="sl-card_title" style="white-space:nowrap">${item.title}</span>
					<div class="sl-card_tips">
						<span class="sl-card_tip">${item.key ? item.key : '默认规格'}</span>
						<img  class="sl-card_lower" src="../images/main3/lower.png"/>
                        ${item.isjia == 0 ? '<span class="sl-flex1 sl-card_dz">已下架</span>' : ''}
						
					</div>
					<div class="sl-card_pbox">
						<span class="sl-card_price">${'¥' + item.price}</span>
						<div class="sl-card_num">
							<span class="${'sl-card_btn' + (item.buynum == 1 ? ' card_btn_disable' : '')}">-</span>
							<span class="sl-card_num_text">${item.buynum}</span>
							<span class="sl-card_btn">+</span>
						</div>
					</div>
				</div>
			</div>
            `
        })
        document.querySelector('.sl-list_box').innerHTML = str;

    }

    function onDetailClick() {
        api.openWin({
            name:'detail',
            url:'./detail.html'
        })
    }

    function onPlaceClick() {
        api.openWin({
            name: 'place_order',
            url:'./place_order.html'
        })
    }



</script>

</html>